<template>
  <div class="ep-insuredInfo" :style="{marginTop: mt === '' ? '' : mt + 'px'}">
    <div class="ep-personal" :style="{ marginRight: '10px'}" v-if="AC01 != null">
      <div class="ep-title" v-show="personalTitle">{{ personalTitle}}</div>
      <div class="ep-hd">
        <span class="ep-hd-title">{{ AC01.aac003 || '人员姓名'}}</span>
        <span class="ep-hd-btn">
          <el-button
            v-show="personalDetailPath"
            type="primary"
            size="mini"
            @click="openDetail(personalDetailPath, '个人详情')"
          >详细查询</el-button>
          <el-button
            v-show="personalEditlPath"
            type="primary"
            size="mini"
            @click="openEdit(personalEditlPath, '个人编辑')"
          >编辑</el-button>
        </span>
      </div>

      <div class="ep-bd" v-if="isEdit">
        <el-row :gutter="20" class="ep-bd-item">
          <el-col :span="12">
            <span class="ep-bd-item-lf">证件号码：{{ AC01.aac147}}</span>
          </el-col>

          <el-col :span="12">
            <span>证件类型：{{ AC01.aac058 | countryTypeFilter}}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="ep-bd-item">
          <el-col :span="12">
            <span
              class="ep-bd-item-list"
              style="width: 33%;"
            >国家(地区)：{{ AC01.aac161 | countryFilter}}</span>
          </el-col>
          <el-col :span="12">
            <span>性别：{{ AC01.aac004 | sexTypeFilter}}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="ep-bd-item">
          <el-col :span="12">
            <span class="ep-bd-item-lf">出生日期：{{ AC01.aac006 | YYYYmmDD_Filter}}</span>
          </el-col>
          <el-col :span="12">
            <span>民族：{{ AC01.aac005 | nationTypeFilter}}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="ep-bd-item">
          <el-col :span="12">
            <span class="ep-bd-item-lf">户口所在地：{{ AC01.aac010}}</span>
          </el-col>
          <el-col :span="12">
            <span>户口性质：{{ AC01.aac009 | accountTypeFilter}}</span>
          </el-col>
        </el-row>
      </div>

      <div class="ep-bd" v-if="!isEdit" style="padding-bottom:12px;">
        <el-form ref="form">
          <el-row>
            <epl-edit-input colspan="12" labelWidth="80" label="证件号码" name="aac147" p="E"></epl-edit-input>
            <epl-edit-select
              colspan="12"
              labelWidth="80"
              label="证件类型"
              name="aac058"
              placeholder="请选择证件类型"
              p="E"
            ></epl-edit-select>
          </el-row>
          <el-row>
            <epl-edit-select
              colspan="12"
              labelWidth="80"
              label="国家(地区)"
              name="aac161"
              placeholder="请选择证件类型"
              p="E"
            ></epl-edit-select>
            <epl-edit-select
              colspan="12"
              labelWidth="80"
              label="性别"
              name="aac004"
              placeholder="请选择证件类型"
              p="E"
            ></epl-edit-select>
          </el-row>
          <el-row>
            <epl-edit-select colspan="12" labelWidth="80" label="出生日期" name="aac006" p="E"></epl-edit-select>
            <epl-edit-select
              colspan="12"
              labelWidth="80"
              label="民族"
              name="aac005"
              placeholder="请选择民族"
              p="E"
            ></epl-edit-select>
          </el-row>
          <el-row>
            <epl-edit-input colspan="12" labelWidth="80" label="户口所在地" name="aac010" p="E"></epl-edit-input>
            <epl-edit-select
              colspan="12"
              labelWidth="80"
              label="户口性质"
              name="aac009"
              placeholder="请选择证件类型"
              p="E"
            ></epl-edit-select>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="ep-unit" v-if="AB01 != null">
      <div class="ep-title" v-show="unitTitle">{{ unitTitle || '单位名称' }}</div>
      <div class="ep-hd">
        <span class="ep-hd-title">{{ AB01.aab069 || '单位名称'}}</span>
        <span class="ep-hd-btn">
          <el-button
            v-show="unitDetailPath"
            type="primary"
            size="mini"
            @click="openDetail(unitDetailPath, '单位详情')"
          >详细查询</el-button>
          <el-button v-show="unitEditlPath" size="mini" @click="openEdit(unitEditlPath, '单位编辑')">编辑</el-button>
        </span>
      </div>
      <div class="ep-bd">
        <div class="ep-bd-item ep-bd-unit">
          <span class="ep-bd-item-lf">统一社会信用代码：{{ AB01.bab010}}</span>
          <span>行政区划：{{ AB01.aab301 | regionTypeFilter}}</span>
        </div>
        <div class="ep-bd-item ep-bd-unit">
          <span class="ep-bd-item-lf">单位类型：{{ AB01.aab019 | unitType}}</span>
          <span>隶属关系：{{ AB01.aab021 | aab021Filter}}</span>
        </div>
        <div class="ep-bd-item ep-bd-unit">
          <span class="ep-bd-item-lf">所属行业：{{ AB01.aab022 | businessTypeFilter}}</span>
          <span>行业风险类别：{{ AB01.aaa149 | riskTypeFilter}}</span>
        </div>
        <div class="ep-bd-item ep-bd-unit">
          <span class="ep-bd-item-lf">联系人：{{ AB01.aae004}}</span>
          <span>联系电话：{{ AB01.aae005}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="es6">
import qs from "qs";

export default {
  props: {
    unitDetailPath: {
      type: String,
      default: "/"
    },
    unitEditlPath: {
      type: String,
      default: ""
    },
    personalDetailPath: {
      type: String,
      default: ""
    },
    personalEditlPath: {
      type: String,
      default: "/"
    },
    unitTitle: {
      type: String,
      default: ""
    },
    personalTitle: {
      type: String,
      default: ""
    },
    mt: {
      type: String,
      default: ""
    },
    isCodeType: {
      type: Boolean,
      default: true
    },
    panel: {
      type: Object,
      default: function() {
        return null;
      }
    }
  },
  data() {
    return {
      isEdit: true,
      AC01: {
        bab010: "",
        aab019: "",
        aab078: "",
        aab013: "",
        aae004: "",
        aae005: "",
        aae006: "",
        aaa120: ""
      },
      AB01: {
        aac002: "",
        aac161: "",
        aac004: "",
        aac006: "",
        aac010: "",
        aac010: "",
        aac067: "",
        aae006: ""
      }
    };
  },
  computed: {
    menu() {
      return this.$store.getters.menu;
    },
    personid() {
      return this.$store.getters.personid;
    },
    companyid() {
      return this.$store.getters.companyid;
    },
    codeTypes() {
      return this.$store.getters.codeTypes;
    }
  },
  watch: {
    menu: {
      handler(value) {
        return value;
      },
      deep: true
    },
    "personid.randowId": {
      handler(value) {
        this.getUserInformation(this.personid, "personid");
      },
      deep: true
    },
    "companyid.randowId": {
      handler(value) {
        this.getUserInformation(this.companyid, "companyid");
      },
      deep: true
    },
    panel: {
      handler(value) {
        this.AB01 = value.cpInfo || {};
        this.AC01 = value.psInfo || {};
      }
    }
  },
  mounted() {},
  methods: {
    // 打开详情
    openDetail(path, title) {
      this.list = [];
      this.$router.push({
        path: path
      });
      this.list.push({
        title: title,
        path: path
      });
      sessionStorage.setItem("menuList", qs.stringify(this.list));
      this.$store.dispatch("SET_MENU", this.unique(this.list));
    },
    // 打开编辑
    openEdit(path, title) {
      this.isEdit = !this.isEdit;
      // this.list = [];
      // this.$router.push({
      //     path: path
      // });
      // this.list.push({
      //     title: title,
      //     path: path
      // });
      // sessionStorage.setItem('menuList', qs.stringify(this.list));
      // this.$store.dispatch('SET_MENU', this.unique(this.list));
    },
    // 去重
    unique(newList) {
      let list = [];
      for (let i in this.menu) {
        list.push(this.menu[i]);
      }
      if (newList) {
        if (!list) {
          return newList;
        } else {
          let temp = [];
          newList.forEach(item => {
            let flag = false;
            list.forEach(menu => {
              if (menu.path && item.path && menu.path === item.path) {
                flag = true;
              }
            });
            if (!flag) {
              temp.push(item);
            }
          });
          return list.concat(temp);
        }
      } else {
        return [];
      }
    },

    /**
     * 根据id获取用户信息
     */
    getUserInformation(value, type) {
      let params = {
        panel: {
          psInfo: {},
          cpInfo: {}
        },
        ...value.data,
        path: this.$route.path
        // commonSearch_info: {
        //     personInfo: '',
        //     companyInfo: ''
        // }
      };
      if (this.isCodeType) {
        params.codeTypes = this.codeTypes;
      }
      if (
        JSON.stringify(this.$store.getters.personid) != "{}" &&
        type == "personid"
      ) {
        params.panel.psInfo = value.row;
        let api = "/doCheck/personSearch/";
        this.getData(params, api);
      }
      if (
        JSON.stringify(this.$store.getters.companyid) != "{}" &&
        type == "companyid"
      ) {
        params.panel.cpInfo = value.row;
        let api = "/doCheck/companySearch/";
        this.getData(params, api);
      }
    },
    /**
     * 根据类型获取数据
     */
    getData(params, api) {
      this.$api.commonPost(this.$route.path + api, params).then(res => {
        if (res.status === "0") {
          let AC01 = {
            bab010: "",
            aab019: "",
            aab078: "",
            aab013: "",
            aae004: "",
            aae005: "",
            aae006: "",
            aaa120: ""
          };
          let AB01 = {
            aac002: "",
            aac161: "",
            aac004: "",
            aac006: "",
            aac010: "",
            aac010: "",
            aac067: "",
            aae006: ""
          };
          this.AB01 = res.data.panel.cpInfo || AC01;
          this.AC01 = res.data.panel.psInfo || AB01;
          this.$store.dispatch("SET_COMMON", res.data);
          this.$store.dispatch("SET_CODETYPE", res.data);
        } else if (res.successMessage && res.successMessage.length > 0) {
          res.successMessage.map(item => {
            this.$message({
              type: "success",
              message: item,
              duration: 0,
              showClose: true
            });
          });
        } else if (res.errorMessage && res.errorMessage.length > 0) {
          res.errorMessage.map(item => {
            this.$message({
              type: "error",
              message: item,
              duration: 0,
              showClose: true
            });
          });
        } else if (res.warnMessage && res.warnMessage.length > 0) {
          res.warnMessage.map(item => {
            this.$message({
              type: "warning",
              message: item,
              duration: 0,
              showClose: true
            });
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.ep-insuredInfo {
  display: flex;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 2px;
  border: none;

  .ep-hd-title {
    color: #0080fa;
  }
  .ep-title {
    color: #0080fa;
    font-size: 18px;
    border-bottom: 1px #dedfe0 solid;
    padding: 0 20px 12px 20px;
    margin-bottom: 20px;
  }
  .ep-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 10px 20px;
    &-title {
      font-size: 18px;
      font-weight: 600;
    }
    &-btn {
    }
  }
  .ep-bd {
    padding: 0 20px 20px 20px;
    &-item {
      padding: 5px 0;
      font-size: 14px;
      &-lf {
        width: 65%;
        .el-input {
          width: 50%;
        }
      }
      &-list {
        width: 32%;
      }
    }
    &-unit {
      display: flex;
      align-items: center;
    }
  }
  .ep-unit {
    flex: 1;
    border-radius: 6px;
    background: #fff;
  }
  .ep-personal {
    flex: 1;
    border-radius: 6px;
    background: #fff;
  }
  .ep-text-green {
    color: #00cc00;
  }
  .ep-text-red {
    color: #ff0000;
  }
}
</style>
